<template>
  <view>
    <!-- 选择地址展示 -->
    <view @tap="showAddress" class="page_choice">
      <view v-if="coname">
        {{coname}}
        <block v-if="ctname">- {{ctname}}</block>
        <block v-if="csname">- {{csname}}</block>
      </view>
      <view v-else>请选择地点</view>
      <u-icon name="arrow-right" color="#8A8A8A" size="28" style="margin-left:15px;"></u-icon>
    </view>
    <!-- 选择地址模态框 -->
    <view class="jm-modal" :class="showFlag==true?'show1':''">
      <view class="dialog">
        <view class="showBox">
          <view class="showBox-action" @tap="hideAddress">
            取消
          </view>
          <view class="showBox-confirm" @click="hideAddress">
            确定
          </view>
        </view>
        <view class="choice">
          已选： {{coname}}-{{ctname}}-{{csname}}
        </view>
        <!-- 省份列表 -->
        <view class="addList">
          <view v-for="(item,index) in addressd1" :key='index' @tap="clickAddress(1,item.AreaId,item.AreaName)"
            class="AreaName-box">
            <view class="AreaName-box-left">{{item.AreaName}}</view>
            <view class="AreaName-box-right" v-if="item.AreaId == co"><u-icon name="checkmark" color="#2979ff"
                size="34"></u-icon></view>
          </view>
        </view>
        <!-- 城市列表 -->
        <view class="addList">
          <view v-for="(item,index) in addressd2" :key='index' @tap="clickAddress(2,item.BuildId,item.BuildName)"
            class="AreaName-box">
            <view class="AreaName-box-left">{{item.BuildName}}</view>
            <view class="AreaName-box-right" v-if="item.BuildId == ct"><u-icon name="checkmark" color="#2979ff"
                size="34"></u-icon></view>
          </view>
        </view>
        <!-- 地区列表 -->
        <view class="addList">
          <view v-for="(item,index) in addressd3" :key='index'
            @tap="clickAddress(3,item.RoomId,item.RoomCode,item.CustName,item.MobilePhone)" class="AreaName-box">
            <view class="AreaName-box-left">{{item.RoomCode}}</view>
            <view class="AreaName-box-right" v-if="item.RoomId==cs"><u-icon name="checkmark" color="#2979ff"
                size="34"></u-icon></view>
          </view>
        </view>
      </view>
    </view>

  </view>
</template>
<script>
var _self;
export default {
  data () {
    return {
      //模态框状态
      showFlag: false,
      // 省份列表
      addressd1: [],
      // 城市列表
      addressd2: [],
      // 地区列表
      addressd3: [],
      //省份id 默认为64，可根据想要默认展示的id自行更改
      co: '',
      //默认省份名称
      coname: '',
      //城市id 默认为64，可根据想要默认展示的id自行更改
      ct: '',
      //默认城市名称
      ctname: '',
      //地区id 默认为575，可根据想要默认展示的id自行更改
      cs: '',
      //默认地区名称
      csname: '',
      CustName: '',
      MobilePhone: ''
    };
  },
  props: {
    //载入的标签数据
    addressd: Array
  },
  mounted () {
    _self = this;
    //默认获取省份列表
    this.getadd(1, 0);
    //默认获取城市列表
    this.getadd(2, this.co);
    //默认获取地区列表
    this.getadd(3, this.ct);
    // 声明默认地址,并传送给父组件
    //this.emitData();
  },
  methods: {
    //呼出模态框
    showAddress () {
      // 呼出模态框
      this.showFlag = true
    },
    // 关闭模态框
    hideAddress () {
      // 关闭模态框
      this.showFlag = null;
      // 声明默认地址,并传送给父组件
      this.emitData();

    },
    // 声明默认地址,并传送给父组件
    emitData () {
      var data = {
        AreaId: _self.co,
        BuildId: _self.ct,
        RommId: _self.cs,
        CustName: _self.CustName,
        MobilePhone: _self.MobilePhone
      }
      _self.$emit("changes", data);
    },
    // 模态框地址点击赋值并获取下一级
    // --flag--- 1(省份点击);2(城市点击);3(地区点击)；
    // --id----(点击的地址id);
    // --name--(点击的地址名称);
    clickAddress (flag, id, name, CustName = null, MobilePhone = null) {
      //判断点击的状态
      switch (flag) {
        case 1:
          _self.coname = name;
          _self.co = id;

          this.ct = ''
          this.ctname = ''

          this.cs = ''
          this.csname = ''

          this.CustName = ''
          this.MobilePhone = ''

          _self.getadd(2, id);
          break;
        case 2:
          _self.ctname = name;
          _self.ct = id;

          this.cs = ''
          this.csname = ''

          _self.getadd(3, id);
          break;
        case 3:
          _self.csname = name;
          _self.cs = id;
          _self.CustName = CustName
          _self.MobilePhone = MobilePhone
          _self.emitData();
          _self.hideAddress();
          break;
        default:
          return;
      }

    },
    async getadd (flag, id) {
      switch (flag) {
        case 1:
          var data = await this.$u.api.GetAreaList()
          this.addressd1 = data
          this.addressd2 = []
          this.addressd3 = []
          break;
        case 2:
          if (id) {
            var data = await this.$u.api.GetBuildList({
              queryJson: {
                AreaId: id
              }
            })
            this.addressd2 = data
            this.addressd3 = []
          }
          break;
        case 3:
          if (id) {
            var data = await this.$u.api.GetRoomPage({
              queryJson: {
                AreaId: this.co,
                BuildId: id
              },
              PageIndex: 1,
              PageSize: 1000
            })
            this.addressd3 = data
            console.log('数据')
            console.log('dddddd')
            console.log(data)
          }
          break;
      }
    }
  }
}
</script>

<style>
.page_choice {
  width:100%;
  height: auto;
  display: flex;
  justify-content: space-between;
}

.choice {
  background-color: #fff;
  padding: 20upx;
  font-size: 28upx;
  text-algin: left;
  border-bottom: solid 1px #ddd;
}

.addList {
  height: 450upx;
  box-sizing: border-box;
  overflow-y: scroll;
  width: 31%;
  float: left;
  margin-left: 2%;
  margin-right: 0%;
  padding-top: 8px;
  font-size: 28upx;
  border: 0px;
  padding: 8px 5px 0px 5px;
}

/* .addList view {
    width:93%;
		height: 70upx;
		line-height: 70upx;
	} */

.check {
  color: #fff;
  background-color: #4DA8EE;
}

.jm-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 10px;
  left: 0;
  z-index: 1110;
  opacity: 0;
  outline: 0;
  text-align: center;
  -ms-transform: scale(1.185);
  transform: scale(1.185);
  backface-visibility: hidden;
  perspective: 2000upx;
  background: rgba(0, 0, 0, 0.6);
  transition: all 0.3s ease-in-out 0s;
  pointer-events: none;
}

.jm-modal::before {
  content: "\200B";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.show1 {
  opacity: 1;
  transition-duration: 0.3s;
  -ms-transform: scale(1);
  transform: scale(1);
  overflow-x: hidden;
  overflow-y: auto;
  pointer-events: auto;
}

.dialog {
  position: fixed;
  bottom:0px;
  left: 0px;
  display: inline-block;
  vertical-align: middle;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 100%;
  height: auto;
  background-color: #fff;
  border-radius: 10upx;
  overflow: hidden;

}

.action {
  position: absolute;

}

.content {
  position: absolute;
  text-align: center;
  width: calc(100% - 340upx);
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  height: 60upx;
  font-size: 32upx;
  line-height: 60upx;
  cursor: none;
  pointer-events: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.showBox {
  background-color: #fff;
  display: flex;
  position: relative;
  align-items: center;
  min-height: 30px;
  justify-content: space-between;
  padding: 10px 15px;
  border-bottom: solid 1px #ddd;
}

.Submit {
  position: absolute;
  top: 0;
  left: 36%;
}

.Submit_button {
  display: flex;
  justify-content: center;
}

.Submit button {
  width: 135px;
  height: 65px;
  line-height: 65px;
  color: #FFFFFF;
  border-radius: 5px;
}

.showBox-confirm {
  color: #007aff;
}

.AreaName-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 92%;
  height: 85upx;
  line-height: 85upx;
  border-bottom: solid 1px #f1f1f1;
  
}

.AreaName-box-left{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.AreaName-box-right {
  width: 30%;
  padding-left: 15px;
}
</style>